import React from 'react'
import { motion } from 'framer-motion'

// 京剧脸谱装饰组件
export const JingMaskDecoration = ({ size = 'medium', className = '', animated = false }) => {
  const sizeClasses = {
    small: 'w-16 h-16',
    medium: 'w-24 h-24',
    large: 'w-32 h-32',
    xl: 'w-48 h-48'
  }

  return (
    <motion.div
      className={`jing-mask-pattern rounded-full ${sizeClasses[size]} ${animated ? 'jing-mask-rotate' : ''} ${className}`}
      animate={{ 
        rotate: animated ? undefined : [0, 5, -5, 0],
        scale: [1, 1.05, 1]
      }}
      transition={{ 
        duration: 4,
        repeat: Infinity,
        ease: "easeInOut"
      }}
    >
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="text-4xl opacity-60">🎭</div>
      </div>
    </motion.div>
  )
}

// 云纹装饰组件
export const CloudDecoration = ({ className = '', animated = true }) => {
  return (
    <motion.div
      className={`cloud-pattern absolute inset-0 opacity-30 ${animated ? 'cloud-float' : ''} ${className}`}
      animate={animated ? undefined : { 
        backgroundPosition: ['0px 0px', '200px 200px']
      }}
      transition={animated ? undefined : { 
        duration: 20,
        repeat: Infinity,
        ease: "linear"
      }}
    />
  )
}

// 水波纹装饰组件
export const WaveDecoration = ({ className = '', animated = true }) => {
  return (
    <motion.div
      className={`wave-pattern absolute inset-0 opacity-40 ${animated ? 'wave-flow' : ''} ${className}`}
      animate={animated ? undefined : { 
        backgroundPosition: ['0px 0px', '240px 0px']
      }}
      transition={animated ? undefined : { 
        duration: 15,
        repeat: Infinity,
        ease: "linear"
      }}
    />
  )
}

// 梅花装饰组件
export const PlumDecoration = ({ className = '', animated = true }) => {
  return (
    <motion.div
      className={`plum-pattern absolute inset-0 opacity-25 ${animated ? 'plum-fall' : ''} ${className}`}
      animate={animated ? undefined : { 
        backgroundPosition: ['0px 0px', '160px 160px']
      }}
      transition={animated ? undefined : { 
        duration: 25,
        repeat: Infinity,
        ease: "linear"
      }}
    />
  )
}

// 国潮边框装饰组件
export const GuochaoBorder = ({ children, className = '', animated = false }) => {
  return (
    <motion.div
      className={`${animated ? 'guochao-border-animated' : 'guochao-border'} p-1 ${className}`}
      whileHover={{ scale: 1.02 }}
      transition={{ duration: 0.3 }}
    >
      <div className="bg-mo-hei/90 rounded-lg p-4">
        {children}
      </div>
    </motion.div>
  )
}

// 传统纹样装饰组件
export const TraditionalOrnament = ({ children, className = '' }) => {
  return (
    <div className={`traditional-ornament ${className}`}>
      {children}
    </div>
  )
}

// 戏曲图案背景组件
export const OperaPatternBackground = ({ children, pattern = 'mask', className = '' }) => {
  const patternClasses = {
    mask: 'jing-mask-pattern',
    cloud: 'cloud-pattern',
    wave: 'wave-pattern',
    plum: 'plum-pattern'
  }

  return (
    <div className={`opera-pattern ${patternClasses[pattern]} ${className}`}>
      {children}
    </div>
  )
}

// 国潮装饰图标组件
export const GuochaoIcon = ({ icon, size = 'medium', className = '' }) => {
  const sizeClasses = {
    small: 'w-8 h-8 text-lg',
    medium: 'w-12 h-12 text-2xl',
    large: 'w-16 h-16 text-3xl',
    xl: 'w-20 h-20 text-4xl'
  }

  return (
    <motion.div
      className={`${sizeClasses[size]} ${className} flex items-center justify-center`}
      whileHover={{ 
        scale: 1.1,
        rotate: 5
      }}
      whileTap={{ scale: 0.95 }}
      transition={{ duration: 0.2 }}
    >
      <div className="jing-gradient rounded-full p-2 flex items-center justify-center">
        <span className="text-white">{icon}</span>
      </div>
    </motion.div>
  )
}

// 传统装饰线条组件
export const TraditionalLine = ({ direction = 'horizontal', className = '', animated = false }) => {
  const lineClasses = {
    horizontal: 'w-full h-1',
    vertical: 'w-1 h-full',
    diagonal: 'w-full h-1 transform rotate-45'
  }

  return (
    <motion.div
      className={`jing-gradient ${lineClasses[direction]} ${animated ? 'traditional-line-animated' : ''} ${className}`}
      initial={{ scaleX: 0 }}
      animate={{ scaleX: 1 }}
      transition={{ duration: 1, ease: "easeOut" }}
    />
  )
}

// 国潮装饰网格组件
export const GuochaoGrid = ({ children, className = '' }) => {
  return (
    <div className={`relative ${className}`}>
      {/* 装饰性网格背景 */}
      <div className="absolute inset-0 opacity-10">
        <div className="grid grid-cols-12 gap-4 h-full">
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className="border-r border-zhu-hong/20"></div>
          ))}
        </div>
        <div className="grid grid-rows-12 gap-4 h-full">
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className="border-b border-shi-qing/20"></div>
          ))}
        </div>
      </div>
      {children}
    </div>
  )
}

// 戏曲装饰容器组件
export const OperaContainer = ({ children, pattern = 'mask', className = '' }) => {
  return (
    <div className={`relative overflow-hidden ${className}`}>
      <OperaPatternBackground pattern={pattern}>
        <div className="relative z-10">
          {children}
        </div>
      </OperaPatternBackground>
    </div>
  )
}

